<template>
  <div>
    <p>点击下面的链接打开 Protege：</p>
    <a @click="openProtege" class="protege-link">Protege建模</a>
    <div class="instruction-box">
      <p>用户名【admin】</p>
      <p>密码【418protege418】</p>
      <p>打开后点击“OntoGraf"开始建模可视化”</p>
      <p>首先点击左侧的本体对象”</p>
      <p>接着点击想扩展的节点”</p>
      <p>然后可以选择节点”</p>
      <p>最后可以选择显示形式”</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    openProtege() {
      fetch("/progete")
        .then((response) => {
          if (!response.ok) {
            throw new Error("Failed to open Protege");
          }
          this.openNewWindow();
          console.log("Protege打开成功！");
        })
        .catch((error) => {
          console.error(`Protege打开失败: ${error.message}`);
        });
    },
    openNewWindow() {
      window.open('http://162.14.69.245:8083/', '_blank');
    }
  },
};
</script>

<style scoped>
.protege-link {
  color: blue;
  cursor: pointer;
  margin-left: 30px;
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
  display: inline-block;
}

.instruction-box {
  margin-left: 30px;
  margin-top: 25px;
  padding: 10px;
  background-color: #f0f0f0;
}
</style>
